<template>
  <div>
    <schedule />
    <div class="enroll">
      <div class="container">
        <el-row class="enroll_btn">
          <el-button type="primary" @click="toEnroll">填写网上报名表</el-button>
          <el-button type="primary" @click="toPrint">浏览网上报名表</el-button>
          <el-button type="primary">提交网上报名表</el-button>
        </el-row>
        <div class="enroll_wrap">
          <div class="enroll_items">
            <h2 class="pub_title">网上报名表</h2>
            <el-row class="enroll_items_row">
              <el-col
                class="enroll_items_col"
                v-for="item in bmList"
                :key="item.id"
              >
                <span class="title"
                  >{{ item.title }}<i v-if="item.required">*</i></span
                >
                <span class="status">已完成</span>
                <span class="status nofinish" v-if="item.status == 0"
                  >未完成</span
                >
              </el-col>
            </el-row>
          </div>
          <div class="enroll_items">
            <h2 class="pub_title">上传材料</h2>
            <el-row class="enroll_items_row">
              <el-col
                class="enroll_items_col"
                v-for="item in stuffList"
                :key="item.id"
              >
                <span class="title"
                  >{{ item.title }}<i v-if="item.required">*</i></span
                >
                <span class="status" v-if="item.status == 1">已提交</span>
                <span class="status nofinish" v-if="item.status == 0"
                  >未提交</span
                >
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import schedule from "@/components/schedule/schedule.vue";
export default {
  name: "enroll",
  components: { schedule },
  props: {},
  data() {
    return {
      show: false,
      bmList: [
        {
          id: 1,
          title: "个人信息",
          required: 1,
          status: 1,
        },
        {
          id: 2,
          title: "工作背景--目前工作",
          required: 1,
          status: 0,
        },
        {
          id: 3,
          title: "工作背景--以往工作",
          required: 1,
          status: 0,
        },
        {
          id: 4,
          title: "教育背景--学位教育",
          required: 1,
          status: 1,
        },
        {
          id: 5,
          title: "教育背景--证书",
          required: 0,
          status: 0,
        },
        {
          id: 6,
          title: "笔试成绩",
          required: 1,
          status: 0,
        },
        {
          id: 7,
          title: "社团活动",
          required: 0,
          status: 1,
        },
        {
          id: 8,
          title: "荣誉及奖励",
          required: 0,
          status: 0,
        },
        {
          id: 9,
          title: "申请人自述",
          required: 1,
          status: 0,
        },
        {
          id: 10,
          title: "推荐人信息",
          required: 1,
          status: 0,
        },
        {
          id: 11,
          title: "奖学金申请",
          required: 1,
          status: 0,
        },
        {
          id: 12,
          title: "其它信息",
          required: 1,
          status: 0,
        },
      ],
      stuffList: [
        {
          id: 1,
          title: "推荐信（1）",
          required: 0,
          status: 1,
        },
        {
          id: 2,
          title: "推荐信（2）",
          required: 0,
          status: 0,
        },
        {
          id: 3,
          title: "证件照",
          required: 1,
          status: 0,
        },
        {
          id: 4,
          title: "有效身份证件",
          required: 1,
          status: 1,
        },
        {
          id: 5,
          title: "名片",
          required: 1,
          status: 0,
        },
        {
          id: 6,
          title: "学历证书",
          required: 1,
          status: 0,
        },
        {
          id: 7,
          title: "学位证书",
          required: 1,
          status: 1,
        },
        {
          id: 8,
          title: "学位认证书",
          required: 1,
          status: 0,
        },
        {
          id: 9,
          title: "现工作单位组织结构图",
          required: 1,
          status: 0,
        },
        {
          id: 10,
          title: "其他专业证书",
          required: 1,
          status: 0,
        },
        {
          id: 11,
          title: "报名费1200元人民币 (第一轮报考免收报名费)",
          required: 0,
          status: 0,
        },
      ],
    };
  },
  methods: {
    toEnroll() {
      this.$router.push({
        path: "/enroll/index",
      });
    },
    toPrint() {
      // 打开一个新的页面
      let print = this.$router.resolve({
        path: "/print",
      });
      window.open(print.href, "_blank");
    },
  },
};
</script>

<style scoped lang="scss">
.enroll {
  width: 1000px;
  margin: 0 auto;
  padding: 4% 0;
}

.enroll_btn {
  display: flex;
  padding: 0 5%;

  .el-button {
    display: block;
    text-align: center;
    background: #003963;
    border-radius: 5px;
    color: #fff;
    width: 26%;
    height: 60px;
    font-size: 24px;
    line-height: 24px;
    margin: 0 3%;
    border: 0 none;
  }
}

.enroll_wrap {
  margin-top: 6%;
  overflow: hidden;
  display: flex;
}

.enroll_items {
  width: 45%;
  margin: 0 5%;
  padding-top: 5%;

  .pub_title {
    color: #003963;
    font-weight: 400;
  }
}

.enroll_items_row {
  margin-top: 50px;
}

.enroll_items_col {
  padding: 4% 0;
  display: flex;

  .title {
    width: 69%;
    font-size: 18px;
    color: #003963;
    line-height: 24px;

    i {
      color: #b9131a;
    }
  }

  .status {
    width: 29%;
    text-align: right;
    font-size: 16px;
  }

  .nofinish {
    font-weight: bold;
    color: #c6a67d;
  }
}

@media (max-width: 768px) {
  .enroll {
    width: 100%;
  }

  .enroll_btn {
    padding: 0;

    .el-button {
      width: 31%;
      height: auto;
      padding: 8px 0;
      font-size: 14px;
      margin: 0 1%;
      text-align: center;
    }
  }

  .enroll_wrap {
    display: block;
    width: auto;
    padding: 0 15px;

    .enroll_items {
      width: auto;
      margin: 0;

      .pub_title {
        text-align: center;
      }
    }
  }

  .enroll_items_row {
    margin-top: 8%;

    .status {
      font-size: 14px;
    }
  }

  .enroll_items_col {
    font-size: 14px;
  }
}

@media (max-width: 320px) {
  .enroll_btn .el-button {
    font-size: 12px;
  }
}
</style>
